<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <title>累计净值(可横竖屏切换))</title>
  <link rel="stylesheet" href="../css/fund.css" />
  <style>
    canvas {
      height: 46.4vw;
    }

    .chart-header-wrapper {
      width: 100%;
      height: 12vw;
      line-height: 12vw;
      vertical-align: middle;
      font-size: 3.2vw;
      color: #808080;
      padding: 0 4.267vw;
    }

    .header-item {
      float: left;
    }

    .header-item:nth-child(1) {
      width: 40%;
    }

    .header-item:nth-child(2) {
      width: 35%;
    }

    .header-item:nth-child(3) {
      width: 25%;
    }

    #chartTooltip {
      visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      height: 8vw;
      line-height: 8vw;
      background: #E9F1FF;
      z-index: 10;
      transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .tab .time-button {
      width: 25%;
    }

    @media only screen and (orientation: landscape) {
      .chart-card {
        margin: 0;
      }
      .chart-card-title {
        padding: 0 2.9985vw;
        width: 100%;
        height: 12vh;
        box-shadow: 0 1px 0 0 #E8E8E8;
        color: rgba(0, 0, 0, .85);
        font-size: 4.26667vh;
        line-height: 12vh;
        vertical-align: middle;
      }

      canvas {
        width: 100%;
        height: 70.6667vh;
        display: block;
      }

      .tab {
        height: 10.667vh;
        line-height: 10.667vh;
      }

      .tab .time-button {
        font-size: 3.4667vh;
        height: 10.667vh;
        line-height: 10.667vh;
      }

      .header-item:nth-child(1) {
        width: 65%;
      }
      .header-item:nth-child(2) {
        width: 20%;
      }
      .header-item:nth-child(3) {
        width: 15%;
      }

      .chart-header-wrapper {
        font-size: 3.2vh;
        position: relative;
        height: 6.666666666666667vh;
        padding: 0 2.9985007496251876vw;
        line-height: 6.666666666666667vh;
        flex-direction: row-reverse;
        box-shadow: 0 1px 0 0 #E8E8E8;
      }

      #chartTooltip {
        line-height: 6.666666666666667vh;
        height: 6.666666666666667vh;
      }
    }
  </style>
  <script src="../js/f2-all.min.js"></script>
  <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
  <script src="../js/util.js"></script>
</head>

<body>
  <div class="chart-card">
    <div class="chart-card-title">
      累计净值
    </div>
    <div class="chart-container">
      <div class="chart-header-wrapper" id="chartTooltip">
        <div class="header-item">
          <span class="item-value" data-type="time">--</span>
        </div>
        <div class="header-item" style="text-align: center;">
          <span>累计净值:</span>
          <span class="item-value" data-type="value">--</span>
        </div>
        <div class="header-item" style="padding-right: 0;">
          <span>日涨幅:</span>
          <span class="item-value" data-type="percent">--</span>
        </div>
      </div>
      <div class="chart-header-wrapper" id="chartLegend">
        <div class="header-item">
          <span class="item-value" data-type="time">--</span>
        </div>
        <div class="header-item" style="text-align: center;">
          <span>累计净值:</span>
          <span class="item-value" data-type="value">--</span>
        </div>
        <div class="header-item" style="padding-right: 0;">
          <span>日涨幅:</span>
          <span class="item-value" data-type="percent">--</span>
        </div>
      </div>
      <!-- 图表主题 -->
      <canvas id="mountNode"></canvas>
      <!-- 时间切换 按钮 -->
      <div class="tab">
        <button class="time-button button-25 active" id="one-month">近 1 月</button>
        <button class="time-button button-25" id="three-month">近 3 月</button>
        <button class="time-button button-25" id="six-month">近 6 月</button>
        <button class="time-button button-25" id="one-year">近 1 年</button>
      </div>
    </div>
  </div>
  <script>
    var Chart = F2.Chart;
    var Util = F2.Util;
    var Animate = F2.Animate;
    // 自定义线图变更动画
    Animate.registerAnimation('lineUpdate', function (updateShape, animateCfg) {
      var cacheShape = updateShape.get('cacheShape'); // 该动画 shape 的前一个状态
      var cacheAttrs = cacheShape.attrs; // 上一个 shape 属性
      var geomType = cacheShape.geomType; // 图形类型

      var oldPoints = cacheAttrs.points; // 上一个状态的关键点
      var newPoints = updateShape.attr('points'); // 当前 shape 的关键点

      var oldLength = oldPoints.length;
      var newLength = newPoints.length;
      var deltaLength = geomType === 'area' ? (oldLength - newLength) / 2 : oldLength - newLength;

      if (deltaLength > 0) {
        var firstPoint = newPoints[0];
        var lastPoint = newPoints[newPoints.length - 1];

        for (var i = 0; i < deltaLength; i++) {
          newPoints.splice(0, 0, firstPoint);
        }

        if (geomType === 'area') {
          for (var j = 0; j < deltaLength; j++) {
            newPoints.push(lastPoint);
          }
        }
      } else {
        deltaLength = Math.abs(deltaLength);
        var firstPoint1 = oldPoints[0];
        var lastPoint1 = oldPoints[oldPoints.length - 1];

        for (var k = 0; k < deltaLength; k++) {
          oldPoints.splice(0, 0, firstPoint1);
        }

        if (geomType === 'area') {
          for (var p = 0; p < deltaLength; p++) {
            oldPoints.push(lastPoint1);
          }
        }

        cacheAttrs.points = oldPoints;
      }
      updateShape.attr(cacheAttrs);
      updateShape.animate().to(Util.mix({
        attrs: {
          points: newPoints
        }
      }, animateCfg));
    });

    function updateLegend(currentInfo) {
      var FSRQ = currentInfo.FSRQ;
      var DWJZ = currentInfo.DWJZ;
      var JZZZL = currentInfo.JZZZL;
      // 填充自定义图例内容
      $('#chartLegend .item-value').each(function (index, ele) {
        var type = $(ele).data('type');
        if (type === 'time') {
          $(ele).text(FSRQ + '（昨日）');
        } else if (type === 'value') {
          $(ele).text(DWJZ.toFixed(4));
        } else if (type === 'percent') {
          var color;
          var text;
          if (JZZZL < 0) {
            color = '#53BC20';
            text = JZZZL + '%';
          } else if (JZZZL > 0) {
            color = '#F5222D';
            text = '+' + JZZZL + '%';
          } else {
            text = JZZZL + '%';
          }
          $(ele).css({
            color: color
          });
          $(ele).text(text);
        }
      });
    }

    // 根据当前横竖屏状态设定 X 轴刻度值
    var landscape = window.innerWidth > window.innerHeight ? true : false;
    var xTickCount = landscape ? 5 : 3;

    var chart = new Chart({
      id: 'mountNode',
      pixelRatio: window.devicePixelRatio,
      padding: [14, 'auto', 'auto']
    });

    // 处理数据
    $.getJSON('./data/nav/one-month.json', function (data) {
      chart.source(data, {
        FSRQ: {
          type: 'timeCat',
          tickCount: xTickCount,
          range: [0, 1]
        },
        DWJZ: {
          tickCount: 5,
          formatter: function (val) {
            return val.toFixed(4);
          }
        }
      });
      chart.animate({
        'axis-label': false
      });
      chart.axis('FSRQ', {
        label: function (text, index, total) {
          var cfg = {
            textAlign: 'center'
          };
          if (index === 0) {
            cfg.textAlign = 'start';
          } else if (index === (total - 1)) {
            cfg.textAlign = 'end';
          }

          var arr = text.split('-');
          if (arr[0] === '2018') {
            cfg.text = arr[1] + '-' + arr[2];
          }
          return cfg;
        }
      });
      chart.axis('DWJZ', {
        label: function (text, index) {
          if (index === 0) {
            return {
              fill: 'rgb(0, 0, 0)'
            };
          }
          return {};
        }
      });
      chart.tooltip({
        showCrosshairs: true,
        crosshairsStyle: {
          stroke: '#CAD7EF'
        },
        custom: true,
        onChange: function (obj) {
          var items = obj.items;
          var FSRQ = items[0].origin.FSRQ;
          var DWJZ = items[0].origin.DWJZ;
          var JZZZL = items[0].origin.JZZZL;
          $('#chartTooltip .item-value').each(function (index, ele) {
            var type = $(ele).data('type');
            if (type === 'time') {
              $(ele).text(FSRQ);
            } else if (type === 'value') {
              $(ele).text(DWJZ.toFixed(4));
            } else if (type === 'percent') {
              var color;
              var text;
              if (JZZZL < 0) {
                color = '#53BC20';
                text = JZZZL + '%';
              } else if (JZZZL > 0) {
                color = '#F5222D';
                text = '+' + JZZZL + '%';
              } else {
                text = JZZZL + '%';
              }
              $(ele).css({
                color: color
              });
              $(ele).text(text);
            }
          });

          $('#chartTooltip').css('visibility', 'visible');
        },
        onHide: function () {
          $('#chartTooltip').css('visibility', 'hidden');
        }
      });
      chart.line().position('FSRQ*DWJZ').animate({
        update: {
          animation: 'lineUpdate'
        }
      });
      chart.area().position('FSRQ*DWJZ').animate({
        update: {
          animation: 'lineUpdate'
        }
      });
      chart.render();
      updateLegend(data[data.length - 1]); // 显示昨日
    });

    // button 点击操作
    $('.tab button').click(function (e) {
      var target = $(e.target);
      var id = target.attr('id');
      if (target.hasClass('active')) {
        return;
      }

      var currentActive = $('.tab').find('button.active');
      currentActive.removeClass('active');
      target.addClass('active');

      var url = `./data/nav/${id}.json`;
      $.getJSON(url, function (json) {
        chart.changeData(json);
      });
    });
  </script>
</body>

</html>
